

'use strict'

import React, { Component } from 'react';

import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    PixelRatio,
} from 'react-native';

let weekDays = ['日', '一', '二', '三', '四', '五', '六'];

export default class Calendar extends Component {

    render() {

        let startTime = new Date();
        // 当月日期
        let newDate = new Date(startTime.getFullYear(), startTime.getMonth() + 1, 0);
        // 当月1号星期几
        let week = new Date(startTime.getFullYear(), startTime.getMonth(), 1).getDay();

        if (week == 7) week = 0;

        // 当月总天数
        let counts = newDate.getDate();
        // 日历行数
        let rowCounts = Math.ceil((counts + week) / 7);
        let items = [];

        for (let row = 0; row < rowCounts; row++) {

            for (let date = 1; date <= 7; date++) {

                // 第几天(1~30...)
                let day = row * 7 + date - week;

                // 非当月日期
                if (day <= 0 || day > counts) {
                    items.push(
                        <View key={row+''+date} style={styles.defaultDay}/>
                    )
                } else {

                    let signDateStyle = [styles.signDate];
                    let dayStyle = [styles.dayStyle];

                    if (day == 1) {
                        dayStyle.push({borderLeftWidth: 1 / PixelRatio.get()})
                    }

                    // 第二行顶部边框
                    if (row == 1 && date <= week) {
                        dayStyle.push({borderTopWidth: 1 / PixelRatio.get()})
                    }

                    // 后台返回["01","13", ...]的两位数日期字符串,故将day转换成对应格式
                    let dayStr = (Array(2).join(0) + day).slice(-2);

                    // 签到日期样式
                    if (this.props.signDates && this.props.signDates.indexOf(dayStr) != -1) {
                        signDateStyle.push({
                            borderColor: 'orange',
                            borderWidth: as(0.5),
                            width: as(30),
                            height: as(30),
                            borderRadius: as(15),
                        })
                    }
                    items.push(
                        <View key={row+''+date} style={dayStyle}>
                            <View style={signDateStyle}>
                                <Text style={{color: 'black'}}>{day}</Text>
                            </View>
                        </View>
                    )
                }
            }
        }
        // 当前月份
        let currentMonthStr = startTime.getFullYear()+' 年 '+(startTime.getMonth()+1)+' 月';

        return (
            <View style={{flex: 1}}>
                <View style={styles.weekDays}>
                    {weekDays.map(weekDay => {
                        return (
                            <View key={weekDay} style={styles.dayContainer}>
                                <Text style={{color: 'black'}}>{weekDay}</Text>
                            </View>
                        )
                    })}
                </View>
                <View style={{flexWrap: 'wrap', flexDirection: 'row'}}>
                    {items}
                </View>
                <View style={styles.currentMonthStr}>
                    <Text style={{color: 'gray'}}>{currentMonthStr}</Text>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    weekDays: {
        flexDirection: 'row',
    },

    dayContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
        borderColor: '#ccc',
        borderBottomWidth: 1 / PixelRatio.get(),
        borderRightWidth: 1 / PixelRatio.get(),
        height: Common.size.width / 7,
    },

    dayStyle: {
        width: Common.size.width / 7 - 0.05,
        height: Common.size.width / 7 - 0.05,
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: '#ccc',
        borderBottomWidth: 1 / PixelRatio.get(),
        borderRightWidth: 1 / PixelRatio.get()
    },

    signDate: {
        justifyContent: 'center',
        alignItems: 'center',
    },

    defaultDay: {
        width: Common.size.width / 7,
        height: Common.size.width / 7,
        backgroundColor: 'rgb(231, 242, 247)'
    },

    currentMonthStr: {
        alignSelf: 'flex-end',
        marginTop: as(10),
        marginRight: as(10),
    }
})